import React from 'react'
import JSXBaseDemo from './JSXBaseDemo'
import ConditionDemo from './ConditionDemo'
import ListDemo from './ListDemo'
import EventDemo from './EventDemo'
import FormDemo from './FormDemo'
import PropsDemo from './PropsDemo'
import StateDemo from './StateDemo'

class BaseUseDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { show: false }
    }
    render() {
        return <div>
            <h2 className="link" onClick={this.toggle}>基础使用</h2>
            <div style={{display: this.state.show ? 'block' : 'none'}}>
                <JSXBaseDemo/> <hr />
                <ConditionDemo/> <hr />
                <ListDemo/> <hr />
                <EventDemo/> <hr />
                <FormDemo/> <hr />
                <PropsDemo/> <hr />
                <StateDemo/> <hr />
            </div>
        </div>
    }
    toggle = () => {
        this.setState({
            show: !this.state.show
        })
    }

}

export default BaseUseDemo